<template>
    <div class="event-x">
        <div class="event-axis-x">
            <axis
                :source="layout"
                :config="axisConfig"
                ref="axisRef"
                @click="handleAxis"
            >
                <template v-slot="{ index }">
                    <era
                        :index="index"
                        :events="events[index]"
                        :era="eras[index]"
                        :axis="axisRef"
                    ></era>
                </template>
            </axis>
        </div>
    </div>
</template>

<script setup>
import { getEra, getEvent } from "@/api/event";
import { TheAxis as Axis } from "@/components";
import { round } from "@/utils/util";
import Era from "./components/theEra.vue";
import axisConfig from "@/config/axis.config";
const events = ref([]);
const layout = ref([]);
const eras = ref([]);
const axisRef = ref([]);

function getSource() {
    getEvent().then((data) => {
        events.value = data.map((item) => item.data);
    });
    getEra().then((data) => {
        eras.value = data;
        layout.value = getWidthPercent(data);
    });
}
function getWidthPercent(source) {
    const ret = [];
    const end = source[source.length - 1].endTime;
    source.forEach((item, idx) => {
        if (idx !== source.length - 1) {
            const percent = round(
                ((item.endTime - item.startTime) * 100) / end,
                2
            );
            ret.push(percent);
        }
    });
    ret.push(100 - ret.reduce((res, prev) => res + prev, 0));
    return ret;
}
function handleAxis(e) {
    console.log(e);
}
getSource();
</script>

<style>
.event-x {
    margin-top: 330px;
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.event-axis-x {
    width: 80%;
    height: 60%;
    transition: all 0.3s;
}
.event-axis-x:hover {
    height: 100%;
}
</style>
